
    <script type="text/html" id="headerToolsBar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                <span>添加</span>
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i>
                <span>删除</span>
            </a>
        </div>
    </script>
    <table  id="variableTable" lay-filter="variableTable"></table>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>



    <script>
        layui.use(['table','setter','util','layer'], function () {
            var table = layui.table;
            var setter = layui.setter;
            var $ = layui.$;
            var layer = layui.layer;
            //流程定义id
            var modelId = '${modelId!}';
            table.render({
                elem: '#variableTable'
                ,cellMinWidth: 80
                , title: '变量管理'
                , url: serverPath.workflowPath+setter.workflowLinkPath+'bpmDefVar/list?modelId=${modelId!}'
                , method: 'get'
                , toolbar: '#headerToolsBar'
                , page: true
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'varName', title: '变量名称',  align: 'center'}
                    , {field: 'varKey', title: '变量Key', align: 'center'}
                    , {fixed: 'right', title: '管理', toolbar: '#bar', width: 150, align: 'center'}
                ]]
            });

            table.on('toolbar(variableTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data; //获取选中行数据
                switch (obj.event){
                    case 'add':
                        layer.open({
                            title:'添加',
                            type: 2,
                            area: ['400px', '350px'],
                            content: serverPath.workflowPath + setter.workflowLinkPath +'bpmDefVar/view/add?modelId='+modelId
                        });
                        break;
                    case 'del':
                        if(data.length === 0){
                            layer.alert('请选择记录！');
                        } else {
                            var varIdArray=[];
                            $.each(data, function (i) {
                                varIdArray.push(data[i].varId);
                            });
                            var varIds = varIdArray.join(",");
                            layer.confirm('确认删除吗？', function () {
                                $.ajax({
                                    url: serverPath.workflowPath + setter.workflowLinkPath +"bpmDefVar/del",
                                    data: {varIds:varIds},
                                    dataType:"json",
                                    success: function (data) {
                                        layer.msg(data.msg, {icon: 1,time: 500});
                                        //执行重载
                                        table.reload('variableTable');
                                    }
                                })

                            });
                        }
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(variableTable)', function (obj) {
                var data = obj.data;
                switch (obj.event){
                    case 'edit':
                        var varId = data.varId;
                        layer.open({
                            title:'修改',
                            type: 2,
                            area: ['400px', '350px'],
                            content: serverPath.workflowPath+ setter.workflowLinkPath +'bpmDefVar/view/add?modelId='+modelId+'&varId='+varId
                        });
                        break;
                }
            });
        });
    </script>
